<!DOCTYPE html>
<html>

<head>
    <title>战争 - 陈冠希</title>
    <meta charset='UTF-8'/>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="./music/assets/music-favicon.ico" type="image/x-icon"/>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <style type="text/css">
        @-moz-keyframes rotate {
            0% {
                -moz-transform: rotate(0deg);
            }
            100% {
                -moz-transform: rotate(360deg);
            }
        }

        @-webkit-keyframes rotate {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .AlbumImg {
            width: 50%;
            z-index: 2;

            border-radius: 50% 50% 50% 50%;
            -moz-animation: rotate 15s infinite linear;
            -webkit-animation: rotate 15s infinite linear;
            animation: rotate 15s infinite linear;
            margin-top: 1rem;

        }

        .PauseImg {
            position: absolute;
            width: 5rem;
            z-index: 3;

            visibility: hidden;
        }

        .LrcWrapper {
            margin-top: 2rem;
            /*固定高度*/
            height: 6rem;
        }

        .LrcMain {
            font-weight: bold;
            font-family: Times, serif;
            font-size: 1.3rem;
        }

        .LrcSecond {
            font-family: Times, serif;
        }

        .Footer {
            /*position: absolute;*/
            /*left: 0;*/
            /*right: 0;*/
            /*bottom: 0;*/
            /*text-align: center;*/
            margin-top: 4rem;
        }
    </style>
</head>

<body onresize="bodyOnResize()">
<div class="wrapper" align="center">
    <br>

    <img id="pauseImg" class="PauseImg" src="./music/assets/pause.png" alt="" onclick="pauseImgClick()">

    <img id="albumImg" class="AlbumImg" src="./music/albums/edc_strawberry.jpg" alt="专辑图片"
         onclick="albumImgClick();" onload="letPauseBtnBeCenterOnAlbum();" />


    <h4>
        战争 - 陈冠希 <br>
        时间：2004年02月 <br>
        专辑：《Please Steal This Album》
    </h4>
    <!--歌词-->
    <div class="LrcWrapper">
        <div id="lrcTop" class="LrcSecond"></div>
        <div id="lrcMain" class="LrcMain">
            歌词
        </div>
        <div id="lrcBottom" class="LrcSecond"></div>
    </div>
    <img style="margin-top: 4rem;" src="./music/assets/playing.gif" alt=""><br>
    <audio style="width: 100%;" id="player"
           class="player" src="./music/audios/zhanzheng.mp3" loop autoplay controls 
           onpause="playerOnPause()"
           onplay="playerOnPlay()">
               该浏览器不支持音乐
           </audio>

    <div class="Footer" align="center">
    </div>
</div>
</body>
<script type="text/javascript">
    // 控制歌词同步
    var player = document.getElementById('player');
    var lrcMain = document.getElementById('lrcMain');
    var lrcTop = document.getElementById('lrcTop');
    var lrcBottom = document.getElementById('lrcBottom');
    var albumImg = document.getElementById('albumImg');
    var pauseImg = document.getElementById('pauseImg');

    var lrcContent = '[ti:战争]\n'+
    '[ar:陈冠希]\n'+
    '[al:]\n'+
    '[offset:500]\n'+
    '[00:02.43]战争\n'+
    '[00:05.78]唱:陈冠希_Hanjin_MC仁_胡蓓蔚\n'+
    '[00:16.54]打 我而家就去打仗\n'+
    '[00:18.44]打属于我自己嘅一场仗\n'+
    '[00:21.14]假若现实世界根本就系一个战场\n'+
    '[00:23.86]咁一切现象系咪一个残酷假象\n'+
    '[00:26.17]假如现实要我去打一场假仗\n'+
    '[00:28.77]打住乜野旗号 打一场点样嘅仗\n'+
    '[00:31.51]打得唔好我嘅生命就此划上句号\n'+
    '[00:34.23]问得唔好 我应该问生命一个乜野问号\n'+
    '[00:36.83]问我 悲哭声可以有几多几多\n'+
    '[00:39.57]问我童谣用乜野号角可以吹乜野悲歌\n'+
    '[00:42.83]歌舞升平嘅世界　几可听到凯旋歌曲\n'+
    '[00:45.43]曲终人散嘅时候 只有剩低几个几个?\n'+
    '[00:48.09]我问我 我嘅战友系咪就系我一个\n'+
    '[00:50.56]我为我 嘅生命战斗要我保卫我\n'+
    '[00:53.20]我话我 进一步退一步 我都难过\n'+
    '[00:55.83]我想我 放弃我 唔再识分对错\n'+
    '[00:58.29]成日顾前顾后 想不靠行左转右\n'+
    '[01:02.67]是我打呢仗自作自受\n'+
    '[01:52.69]成日斗前斗后\n'+
    '[01:54.73]想走都难自己走\n'+
    '[01:57.42]有伤口 有时得手 有时失手 我都要受\n'+
    '[02:02.66]成日顾前顾后 想不靠行左转右\n'+
    '[02:07.70]是我打呢仗自作自受\n'+
    '[02:20.13]米高峰 check one two one\n'+
    '[02:22.10]the one and everyone is innocent\n'+
    '[02:24.42]Edison MC 陈奂仁\n'+
    '[02:26.96]而家就rap一d野关于战争\n'+
    '[02:29.52]世上某d角落每日都有战争发生\n'+
    '[02:31.99]每人都参与每人都有内心斗争\n'+
    '[02:34.68]危险嘅系战场上枪林弹雨 血肉横飞\n'+
    '[02:37.16]危险嘅系支咪加唇枪舌剑 口沫横飞\n'+
    '[02:39.22]呢首歌系一场战争\n'+
    '[02:41.42]三个血肉者 你同我同佢边个\n'+
    '[02:43.71]可以选择做旁观者\n'+
    '[02:45.30]无人会钟意见到 遍地死者\n'+
    '[02:47.59]无人会钟意做 战地记者\n'+
    '[02:49.92]唔想知道乜野叫做战争罪行\n'+
    '[02:52.64]剩系知道呢度法律唔保障所有嘅人\n'+
    '[02:55.26]自己做军备竞赛\n'+
    '[02:56.77]自己打自己几仗\n'+
    '[02:58.16]自己俘掳自己 自己混自己嘅帐\n'+
    '[03:00.39]成日要名要利\n'+
    '[03:02.51]冲冲冲从未识死\n'+
    '[03:04.95]再不分战场屋企 爱人知己 我想胜利\n'+
    '[03:10.28]行或企如战地\n'+
    '[03:12.72]很想死而未敢死\n'+
    '[03:15.32]是我想得太尽要争气\n'+
    '[03:20.90]成日斗前斗后\n'+
    '[03:23.05]想走都难自己走\n'+
    '[03:25.75]有伤口 有时得手 有时失手 我都要受\n'+
    '[03:30.99]成日顾前顾后\n'+
    '[03:33.40]想不靠行左转右\n'+
    '[03:36.26]是我打呢仗自作自受\n';

    /**
     * 让暂停按钮居中专辑图片
     * */
    function letPauseBtnBeCenterOnAlbum() {
        var albumImgHeight = albumImg.offsetHeight;
        var albumImgWidth = albumImg.offsetWidth;
        var albumImgLeft = albumImg.offsetLeft;
        var albumImgTop = albumImg.offsetTop;

        var pauseImgHeight = pauseImg.offsetHeight;
        var pauseImgWidth = pauseImg.offsetWidth;

        var innerOffsetLeft = albumImgWidth / 2 - pauseImgWidth / 2;
        var innerOffsetTop = albumImgHeight / 2 - pauseImgHeight / 2;
        var offsetLeft = albumImgLeft + innerOffsetLeft;
        var offsetTop = albumImgTop + innerOffsetTop;

        pauseImg.style.left = offsetLeft + 'px';
        pauseImg.style.top = offsetTop + 'px';
    }

    /**
     * @param lrc
     * @returns {Array} 返回结果是时间对应的歌词array[{time(s), clause}, ...]
     */
    function parseLyric(lrc) {
        var lyrics = lrc.split("\n");
        var lrcArr = [];
        var idx = 0;
        for (var i = 0; i < lyrics.length; i++) {
            var lyric = decodeURIComponent(lyrics[i]);
            var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
            var timeRegExpArr = lyric.match(timeReg);
            if (!timeRegExpArr) continue;
            var clause = lyric.replace(timeReg, '');
            for (var k = 0, h = timeRegExpArr.length; k < h; k++) {
                var t = timeRegExpArr[k];
                var min = Number(String(t.match(/\[\d*/i)).slice(1)),
                    sec = Number(String(t.match(/\:\d*/i)).slice(1));
                var time = min * 60 + sec;

                lrcArr[idx++] = {time: time, clause: clause};
            }
        }
        return lrcArr;
    }


    var lrcArr = parseLyric(lrcContent);
    // player.play();

    player.ontimeupdate = function (e) {
        //当前播放的时间
        var currentTime = this.currentTime;

        //遍历所有歌词，看哪句歌词的时间与当然时间吻合
        for (var i = 0; i < lrcArr.length; i++) {
            var obj = lrcArr[i];
            if (currentTime <= obj.time) {
                continue;
            }

            if (i > 0) {
                lrcTop.innerHTML = lrcArr[i - 1].clause;
            }
            if (i > 1) {
                lrcTop.innerHTML = lrcArr[i - 2].clause + '<br>';
                lrcTop.innerHTML += lrcArr[i - 1].clause;
            }

            //显示到页面
            lrcMain.innerHTML = obj.clause;

            if (i < lrcArr.length - 1) {
                lrcBottom.innerHTML = lrcArr[i + 1].clause;
            }
            if (i < lrcArr.length - 2) {
                lrcBottom.innerHTML = lrcArr[i + 1].clause + '<br>';
                lrcBottom.innerHTML += lrcArr[i + 2].clause;
            }

        }//遍历结束

    };

    function bodyOnResize() {
        letPauseBtnBeCenterOnAlbum();
    }

    /**
     * 专辑头像点击事件
     */
    function albumImgClick() {
        if (player.paused === false) {
            player.pause();
        } else {
            player.play()
        }
    }

    function pauseImgClick() {
        if (pauseImg.style.visibility === 'visible') {
            player.play()
        }
    }

    function playerOnPlay() {
        albumImg.style.animationPlayState = 'running';
        pauseImg.style.visibility = 'hidden';
    }

    function playerOnPause() {
        albumImg.style.animationPlayState = 'paused';
        pauseImg.style.visibility = 'visible';
    }
    playerOnPause();

     // 适配微信
    document.addEventListener('WeixinJSBridgeReady', function() {
        player.play();
    }, false);

</script>

</html>